<template>
 <div class="parent-container" style="position:relative">
     <el-table
      :data="menuTreeData"
      v-loading="loading" 
      style="width: 100%; margin-bottom: 20px"
      row-key="menuId"
      border
      default-expand-all
    >
      <el-table-column prop="menuName" :label="$t('role.auth.menuName')" width="180" />
      <el-table-column :label="$t('role.auth.authName')" >
        <template #default="props">
            <template v-if="props.row.privilegeList && props.row.privilegeList.length>0">
                <el-checkbox-group v-model="selectData">
                    <el-checkbox :key="props.row.menuId+'_'+priv.privilegeId" v-for="priv in props.row.privilegeList" :label="priv.privilegeId" >
                        {{ priv.privilegName }}
                    </el-checkbox>
                </el-checkbox-group>
            </template>
            <template v-else>
                <el-checkbox :key="props.row.menuId" v-model="props.row.checkAll" :indeterminate="props.row.isIndeterminate" @change="val=>handleCheckAllChange(val,props.row)">
                    {{$t('data.list.selectAll')}}
                </el-checkbox>
            </template>        
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submitRoleAuth" :loading="loading">{{$t('data.button.save')}}</el-button>
    <el-button @click="backToList">{{$t('data.button.return')}}</el-button>
 </div>
 
</template>
<script>
import menuApi from '@/api/menu'
import roleApi from '@/api/role'
export default{
    data(){
        return {
            roleId:this.$route.params.roleId,
            allMenus:[],
            selectData:[],
            loading:false,
        }
    },
    computed:{
        menuTreeData(){
            this.allMenus.forEach(item=>{
                if(!(item.privilegeList && item.privilegeList.length>0)){
                    const subChildren=this.getAllPrivilegeId(item.menuId)
                    const subCount=subChildren.length
                    const selectCount=subChildren.filter(a=>this.selectData.indexOf(a)>-1).length
                    item.checkAll=subCount>0 && subCount==selectCount
                    item.isIndeterminate=selectCount>0 && selectCount<subCount
                }
            })
            return this.getMenuTree(null);
        }
    },
    mounted(){
         this.getTableList()
    },
    methods:{
        getTableList(){
            this.loading=true;
            Promise.all([this.getMenuPrivs(),this.getRolePrivs()]).then(()=>{
                this.loading=false;
            })
            .catch(()=>{
                this.loading=false;
            })
        },
        getMenuPrivs(){
            return menuApi.getMenuAuths().then(d=>{
                console.log('getMenuPrivs',d)
                if(!!d && d.code=='200'){
                    this.allMenus=d.data || []
                    console.log('this.allMenus',this.allMenus)
                }
                return Promise.resolve();
            })
            .catch(()=>{
                return Promise.reject()
            })
        },
        getRolePrivs(){
            return roleApi.getRolePrivs(this.roleId).then(d=>{
                console.log(d)
                if(!!d && d.code=='200'){
                    this.selectData=d.data || [];
                }
                return Promise.resolve();
            }).catch(()=>{
                return Promise.reject()
            })
        },
        getMenuTree(parentId){
            return this.allMenus.filter(a=>a.parentId==parentId).map(menu=>{
                let childrenArr=this.allMenus.filter(a=>a.parentId==menu.menuId);
                if(childrenArr.length>0){
                    menu.children=this.getMenuTree(menu.menuId)
                }
                return menu
            })
        },
        getAllPrivilegeId(parentId){
            let arr=[];
            this.allMenus.filter(a=>a.menuId==parentId).forEach(item=>{
                if(item.privilegeList && item.privilegeList.length>0){
                    arr=arr.concat(item.privilegeList.map(a=>a.privilegeId))
                }
                else{
                    let childs=this.allMenus.filter(a=>a.parentId==item.menuId)
                    childs.forEach(sub=>{
                        let childArr=this.getAllPrivilegeId(sub.menuId)
                        if(childArr.length>0){
                            arr=arr.concat(childArr);
                        }
                    })
                }
            })
            return arr;
        },
        submitRoleAuth(){
            this.loading=true
            roleApi.updateRolePrivs(this.roleId,this.selectData).then(d=>{
                if(!!d && d.code=='200'){
                    this.$message({
                        showClose: true,
                        message: this.$t('data.result.saveSuccess'),
                        type: 'success',
                    })
                    this.getTableList()
                }
                else{
                     this.$message({
                        showClose: true,
                        message: this.$t('data.result.saveError'),
                        type: 'error',
                    })

                    this.loading=false
                }
            }).catch(()=>{
                this.loading=false
            })
        },
        backToList(){
            this.$router.push('/role')
        },
        handleCheckAllChange(value,row){
            if(value){
                this.selectData=this.selectData.concat(this.getAllPrivilegeId(row.menuId).filter(a=>this.selectData.indexOf(a)<0))
            }
            else{
                let current=this.getAllPrivilegeId(row.menuId).filter(a=>this.selectData.indexOf(a)>-1)
                this.selectData=this.selectData.filter(a=>current.indexOf(a)<0);
            }
        }
    }
}
</script>
